<template>
    <view>
        <!-- pages/task/index.wxml -->
        <!-- 头部 -->
        <navber id="head-navber" :navbarData="navbarData"></navber>

        <!-- 图片 -->
        <view class="top-img">
            <image :src="banner_src"></image>
        </view>

        <!-- 按钮 -->
        <view class="label">
            <view class="label-option">
                <view class="label-option-label" @tap="label_select($event, { selects: 'new' })" data-selects="new">
                    <view class="label-option-label-text">
                        <view :class="labelSelects == 'new' ? 'label-option-label-btn-action' : ''">最新任务</view>
                        <view :class="labelSelects == 'new' ? 'label-option-label-action' : ''"></view>
                    </view>
                </view>
                <view class="label-option-label" @tap="label_select($event, { selects: 'read' })" data-selects="read">
                    <view class="label-option-label-text">
                        <view :class="labelSelects == 'read' ? 'label-option-label-btn-action' : ''">阅读任务</view>
                        <view :class="labelSelects == 'read' ? 'label-option-label-action' : ''"></view>
                    </view>
                </view>
                <view class="label-option-label" @tap="label_select($event, { selects: 'upload' })" data-selects="upload">
                    <view class="label-option-label-text">
                        <view :class="labelSelects == 'upload' ? 'label-option-label-btn-action' : ''">下载任务</view>
                        <view :class="labelSelects == 'upload' ? 'label-option-label-action' : ''"></view>
                    </view>
                </view>
                <view class="label-option-label" @tap="label_select($event, { selects: 'video' })" data-selects="video">
                    <view class="label-option-label-text">
                        <view :class="labelSelects == 'video' ? 'label-option-label-btn-action' : ''">视频任务</view>
                        <view :class="labelSelects == 'video' ? 'label-option-label-action' : ''"></view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 任务列表 -->
        <view class="task">
            <view class="task-item" @tap="go_task($event, { url: item.url })" :data-url="item.url" v-for="(item, index) in taskList" :key="index">
                <view class="task-item-title">
                    <view class="task-item-title-text">{{ item.title }}</view>
                    <view class="task-item-title-price">奖励:￥{{ item.price }}</view>
                </view>

                <view class="task-item-label">
                    <view class="task-item-label-item">{{ item.type == 1 ? '阅读' : item.type == 2 ? '下载' : '视频' }}任务</view>
                    <view class="task-item-label-item" v-for="(item1, index1) in item.label" :key="index1">{{ item1 }}</view>
                </view>

                <view class="task-item-detail">
                    {{ item.task_content }}
                </view>

                <view class="task-item-count">
                    <view class="task-item-count-left">{{ item.exist_number }}人已赚</view>
                    <view class="task-item-count-right">剩余{{ item.number }}人</view>
                    <view class="task-item-count-bac" :style="'width:' + (item.bfb > 30 ? item.bfb : 30) + '%'"></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import navber from '@/components/navber/index';
// pages/task/index.js
const Api = require('../../api/index.js');

const Config = require('../../config/index.js');

export default {
    components: {
        navber
    },
    data() {
        return {
            navbarData: {
                title: '迎家',
                //顶部标题
                is_show_bottom: true,
                //显示背景图
                bac_img: '/assets/imgs/navbar/navbar_bg1' //显示背景图片
            },
            //导航栏
            imgUrl: Config.imgUrl,
            //图片url
            labelSelects: 'new',
            //默认最新
            pagenow: 1,
            banner: [],
            banner_src: 'http://yinjia.oss-cn-beijing.aliyuncs.com/banner/20200521012811_71ge.jpg',
            taskList: []
        };
    },
    onReachBottom: function (e) {
        //滚动底部
        var page = this.pagenow + 1;
        this.setData({
            pagenow: page
        });
        this.getData();
    },
    onLoad() {
        this.bannerFun();
    },
    onPullDownRefresh(e) {
        this.setData({
            pagenow: 1,
            taskList: []
        });
        this.getData();
        uni.stopPullDownRefresh();
    },
    methods: {
        bannerFun() {
            // 轮播数据
            var json = {
                area: 'task'
            };
            Api.banner(json).then((res) => {
                if (res.data.length > 0) {
                    this.setData({
                        banner: res.data,
                        banner_src: res.data[0].banner_src
                    });
                }

                this.getData();
            });
        },

        go_task(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            const url = e.currentTarget.dataset.url;

            if (url.indexOf('http') == 0) {
                uni.navigateTo({
                    url: '/pages/webview/index?url=' + url
                });
            } else {
                uni.navigateTo({
                    url: '/pages/webview/index?url=' + url
                });
            } //跳转制定任务
        },

        label_select(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //标签选择
            this.setData({
                labelSelects: e.currentTarget.dataset.selects,
                pagenow: 1,
                taskList: []
            });
            this.getData();
        },

        getData() {
            var json = {
                pagenow: this.pagenow,
                task_type: this.labelSelects
            };
            Api.taskList(json).then((res) => {
                if (res.data.length > 0) {
                    var data = this.taskList;
                    data = data.concat(res.data);
                    this.setData({
                        taskList: data
                    });
                } else {
                    uni.showToast({
                        title: '暂无数据',
                        icon: 'none',
                        duration: 2000
                    });
                } // wx.stopPullDownRefresh();
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
